<template>
  <div class="new full-height bg-white page-content radius">
    <div class="full-height " style="padding: 20px" >
    <!--  标题-->
      <div class="text-center" style="margin-bottom: 20px; border-bottom: 1px solid rgba(211,211,211,1);">
        <span  style="font-size:22px; display: inline-block; text-align: right;max-width: 100%" class="text-ellipsis">{{title}} <br>
          <span style="font-size:14px;">{{date}}</span>
        </span>
      </div>
    <!--  正文-->
      <q-scroll-area  ref="scrollTargetRef" style="margin: 0 10px;flex: 1;height: calc(100% - 148px)" :thumb-style="thumbStyle">
        <q-infinite-scroll :offset="250" :scroll-target="$refs.scrollTargetRef"  ref="scrollTarget">
          <div class="row justify-center q-my-md" v-if="loading">
            <q-spinner-dots color="primary" size="40px" />
          </div>
          <div class="content" v-html="content" style="" v-else></div>
          <div class="text-center margin-t-20 fixed-btn" >
            <q-btn class="btn"
                   style="width: 96px"
                   unelevated
                   color="primary"
                   @click="$router.go(-1)"
                   label="返回" />
          </div>
        </q-infinite-scroll>
      </q-scroll-area>
    </div>
  </div>
</template>

<script>
import { getNoticeNewsDetail } from 'src/boot/home/home-new'

export default {
  name: 'news-detail_1',
  data () {
    return {
      // 滚动条样式
      thumbStyle: this.CommonConfig.thumbStyle,
      id: '',
      title: '',
      date: '',
      content: '',
      loading: false
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getInfo()
  },
  activated () {
    if (this.id !== this.$route.query.id) {
      this.id = this.$route.query.id
      this.getInfo()
    }
  },
  methods: {
    getInfo () {
      this.loading = true
      getNoticeNewsDetail(this.id).then(res => {
        console.log(res)
        this.title = res.data.title || ''
        this.date = res.data.createDate || ''
        this.content = res.data.content
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.radius{
  border-radius 6px
}
.text {
  font-weight bold
  font-size 16px
  display block
}
.fixed-btn{
  position fixed
  bottom 44px;
  left 50%;
  transform translateX(-48px)
}
.content{
  padding 0 15%
  max-width 100%
  img{
    max-width 100%
  }
}
</style>
